<template>
  <div class="all" style="">
    <img
      :src="bookitem.bookCover"
      style="width: 15%; margin-top: 5%; margin-left: -70%"
    />
    <div style="margin-left: 3%">
      <textarea
        name=""
        id=""
        cols="90"
        rows="15"
        style="
          background-color: rgba(0, 0, 0, 0.37);
          color: white;
          margin-top: 5%;
          margin-left: -57%;
        "
        v-model="textarea"
        @keydown.enter="pushcomment()"
        placeholder="请写下你的评论👀"
      ></textarea>
      <el-button
        class="buy"
        @click="pushcomment()"
        @keydown.enter="pushcomment()"
        >发送</el-button
      >
    </div>
    <div
      style="
        width: 47%;
        overflow: auto;
        height: 75%;
        margin-top: -43%;
        margin-left: 48%;
        border: 3px solid #1817171a;
      "
    >
      <h1
        style="
          color: white;
          font-size: 45px;
          margin-left: -3%;
          margin-bottom: 2%;
        "
      >
        评论区
      </h1>
      <ul
        v-for="Item in Comments"
        :key="Item.commentId"
        style="
          background-color: transparent;
          color: #a1bf39;
          width: 30%;
          margin-left: 17%;

          list-style: none;
        "
      >
        <li style="color: white; margin-bottom: 5%; text-align: left">
          <el-avatar :src="Item.userCover"> </el-avatar>{{ Item.body }}
        </li>
        <el-button
          v-if="userId == Item.userId"
          @click="deleteComment(Item)"
          style="
            margin-left: 194%;
            background-color: rgba(28, 116, 185, 0.8);
            color: white;
            margin-top: -38%;
          "
          >删除</el-button
        >
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "BookComment",
  data() {
    return {
      bookitem: [],
      textarea: "",
      Comments: [],
      userId: "",
    };
  },
  created() {
    this.bookitem = JSON.parse(sessionStorage.getItem("bookitem"));
  },
  methods: {
    pushcomment() {
      var userId = JSON.parse(sessionStorage.getItem("userId"));

      var bookId = JSON.parse(sessionStorage.getItem("bookitem")).bookId;
      var data = new FormData();
      data.append("userId", userId);
      data.append("bookId", bookId);
      data.append("body", this.textarea);
      this.$axios.post("/pushcomment", data).then((resp) => {
        (this.textarea = ""), this.loadcomment();
      });
    },
    loadcomment() {
      var bookId = JSON.parse(sessionStorage.getItem("bookitem")).bookId;
      var data = new FormData();
      data.append("bookId", bookId);
      this.$axios.post("/loadcomment", data).then((resp) => {
        this.Comments = resp.data;
        console.log(resp.data);
      });
    },
    getdelete() {
      this.userId = sessionStorage.getItem("userId");
    },
    deleteComment(item) {
      var data = new FormData();
      data.append("userId", item.commentId);
      this.$axios.post("/deletecomment", data).then((resp) => {
        this.loadcomment();
        this.returnsucess()
      });
    },
    returnsucess() {
      this.$message({
        message: "删除成功",
        type: "success",
      });
    },
  },
  mounted: function () {
    this.loadcomment();
    this.getdelete();
  },
};
</script>
<style scoped>
.all {
  width: 100%;
  height: 100vh;
  /* background-color: rgb(0, 0, 0); */
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url(../../assets/5.jpg);
}
.buy {
  background-color: #1c74b9cc;
  color: white;
  margin-top: -2%;
}
.buy:hover {
  background-color: #a1bf39;
  color: white;
}
</style>



